<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <link href="../build/home.css" rel="stylesheet"/>
</head>
<body>
<div id="page-wrap">
<div id="page-hd">
    <div id="page-hd-wrap">
        <div id="welcome">欢迎您：<em class="highlight">xxx</em></div>
        <div class="sm-left">剩余短信条数：<em class="highlight">xxx</em></div>
        <div class="recharge-btn">
            <a href="#page-hd" target="_blank">充值续费</a>
        </div>

        <div id="exit" class="link-wrap"><a href="#page-hd" target="_blank">退出</a></div>
    </div>
</div>
<div id="page-bd">
<div id="page-bd-wrap">
<div id="nav">
    <h1 id="logo">
        <img src="../img/logo.png" alt="速鸽"/>
    </h1>
    <ul class="tabs-navs">
        <li class="tabs-nav tabs-nav-active" id="tabs-nav-home">
            <a href="#nav" target="_blank">首页</a>
        </li>
        <li class="tabs-nav" id="tabs-nav-distribution">
            <a href="#nav" target="_blank">物流提醒</a>
        </li>
        <li class="tabs-nav tabs-nav-disabled" id="tabs-nav-pay">
            <a href="#nav" target="_blank">催付通知</a>
        </li>
        <li class="tabs-nav tabs-nav-disabled" id="tabs-nav-activity">
            <a href="#nav" target="_blank">活动推送</a>
        </li>
        <li class="tabs-nav tabs-nav-disabled" id="tabs-nav-card">
            <a href="#nav" target="_blank">道具卡通知</a>
        </li>
    </ul>
    <div class="recharge-btn">
        <a href="#nav" target="_blank">充值续费</a>
    </div>
    <p class="ad">最好的<br/>短信营销工具</p>
</div>
<div id="content">
<div id="content-hd">
    <div id="user-avatar"><img src="../img/avatar.png" alt="头像"/></div>
    <div id="user-info">
        <p id="user-name">xxx</p>

        <p id="user-shop">店铺：xxx</p>

        <p id="user-expire">服务到期时间：2015-3-20</p>
    </div>
    <div id="user-stats">
        <p id="sm-sent-yesterday">昨日发送短信（<em class="highlight">xx</em>）条</p>

        <p id="points">目前有（<em class="highlight">xx</em>）积分</p>
    </div>
</div>
<div id="content-bd">
    <div class="tabs-content" id="tabs-content-home">
        <div id="home-block-1">
            <div class="mod">
                <div class="mod-hd">
                    剩余短信条数
                </div>
                <div class="mod-bd">
                    xxx
                </div>
                <div class="mod-ft">
                    <div class="btn recharge-btn">
                        <a href="#content" target="_blank">充值续费</a>
                    </div>
                </div>
            </div>
            <div class="mod">
                <div class="mod-hd">
                    服务到期时间
                </div>
                <div class="mod-bd">
                    xxx
                </div>
                <div class="mod-ft">
                    <div class="btn">
                        <a href="#content" target="_blank">续订</a>
                    </div>
                </div>
            </div>
            <div id="notice">
                <ul>
                    <li>
                        <a href="" target="_blank">【最新公告】：速鸽短信充值套餐详解</a>
                    </li>
                    <li>
                        <a href="" target="_blank">【使用帮助】：如何设置短信提醒</a>
                    </li>
                    <li>
                        <a href="" target="_blank">【促销信息】：即日起，充值满500元赠送1000条</a>
                    </li>
                    <li>
                        <a href="" target="_blank">【促销活动】：评价有礼，评价打分即可免费获得</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="home-services">
            <ul>
                <li class="mod">
                    <div class="mod-hd">
                        物流提醒
                    </div>
                    <div class="mod-bd">
                        已发货、延迟发货，物流状态等买家关注的消息发送。
                    </div>
                    <div class="mod-ft">
                        <a href="#tabs-content-home">进入设置</a>
                    </div>
                </li>
                <li class="mod mod-disabled">
                    <div class="mod-hd">
                        催付通知<em class="secondary">（即将上线）</em>
                    </div>
                    <div class="mod-bd">
                        已发货、延迟发货，物流状态等买家关注的消息发送。
                    </div>
                    <div class="mod-ft">
                        <a href="#tabs-content-home">进入设置</a>
                    </div>
                </li>
                <li class="mod mod-disabled">
                    <div class="mod-hd">
                        活动推送<em class="secondary">（即将上线）</em>
                    </div>
                    <div class="mod-bd">
                        已发货、延迟发货，物流状态等买家关注的消息发送。
                    </div>
                    <div class="mod-ft">
                        <a href="#tabs-content-home">进入设置</a>
                    </div>
                </li>
                <li class="mod mod-disabled">
                    <div class="mod-hd">
                        道具卡通知<em class="secondary">（即将上线）</em>
                    </div>
                    <div class="mod-bd">
                        已发货、延迟发货，物流状态等买家关注的消息发送。
                    </div>
                    <div class="mod-ft">
                        <a href="#tabs-content-home">进入设置</a>
                    </div>
                </li>
            </ul>

        </div>

    </div>
    <div class="tabs-content" id="tab-distribution">
        <div id="distribution-list">
            <ul>
                <li id="distribution-sent">
                    <div class="mod">
                        <div class="mod-hd">
                            <h4>已发货提醒</h4>
                            <a href="#tab-distribution" target="_blank"
                               class="btn switch-btn switch-btn-on">立即开启</a>
                            <span class="tip">您的短信余额不足，请点此充值。</span>
                        </div>
                        <div class="mod-bd">
                            <p class="sm-content">
                                亲，您的宝贝已发货，【快递公司】【快递单号】，请注意查收，有问题请联系【店铺名称】。
                            </p>
                        </div>
                        <div class="mod-ft">
                            <a href="#tab-distribution" target="_blank" class="btn setting-btn">短信设置</a>

                            <p class="stats">发送量：昨（<em class="highlight">x</em>） 今（<em class="highlight">x</em>）</p>
                        </div>
                    </div>
                </li>
                <li id="distribution-delay">
                    <div class="mod">
                        <div class="mod-hd">
                            <h4>迟发货提醒</h4>
                            <a href="#tab-distribution" target="_blank"
                               class="btn switch-btn switch-btn-on">立即开启</a>
                        </div>
                        <div class="mod-bd">
                            <p class="sm-content">
                                亲，您的宝贝已发货，【快递公司】【快递单号】，请注意查收，有问题请联系【店铺名称】。
                            </p>
                        </div>
                        <div class="mod-ft">
                            <a href="#tab-distribution" target="_blank" class="btn setting-btn">短信设置</a>

                            <p class="stats">发送量：昨（<em class="highlight">x</em>） 今（<em class="highlight">x</em>）</p>
                        </div>
                    </div>
                </li>
                <li id="distribution-arrive">
                    <div class="mod">
                        <div class="mod-hd">
                            <h4>到达提醒</h4>
                            <a href="#tab-distribution" target="_blank"
                               class="btn switch-btn switch-btn-off">已开启</a>
                        </div>
                        <div class="mod-bd">
                            <p class="sm-content">
                                亲，您的宝贝已发货，【快递公司】【快递单号】，请注意查收，有问题请联系【店铺名称】。
                            </p>
                        </div>
                        <div class="mod-ft">
                            <a href="#tab-distribution" target="_blank" class="btn setting-btn">短信设置</a>

                            <p class="stats">发送量：昨（<em class="highlight">x</em>） 今（<em class="highlight">x</em>）</p>
                        </div>
                    </div>
                </li>
                <li id="distribution-receive">
                    <div class="mod">
                        <div class="mod-hd">
                            <h4>签收提醒</h4>
                            <a href="#tab-distribution" target="_blank"
                               class="btn switch-btn switch-btn-off">已开启</a>
                        </div>
                        <div class="mod-bd">
                            <p class="sm-content">
                                亲，您的宝贝已发货，【快递公司】【快递单号】，请注意查收，有问题请联系【店铺名称】。
                            </p>
                        </div>
                        <div class="mod-ft">
                            <a href="#tab-distribution" target="_blank" class="btn setting-btn">短信设置</a>

                            <p class="stats">发送量：昨（<em class="highlight">x</em>） 今（<em class="highlight">x</em>）</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div id="distribution-sample">
            <img src="../img/sm_sample.png"/>
        </div>
    </div>
    <div class="tabs-content" id="tab-pay"></div>
    <div class="tabs-content" id="tab-activity"></div>
    <div class="tabs-content" id="tab-card"></div>

</div>

</div>
</div>

</div>
<div id="page-ft">
    <p id="copyright">速鸽短信营销</p>
</div>
</div>
<div id="distribution-modal" class="modal">
    <div class="modal-wrap">
    </div>
    <a href="#page-wrap" target="_blank" class="modal-close">关闭</a>
</div>
<div id="recharge-modal" class="modal">
    <div class="modal-wrap">
        <div class="modal-hd">
            <ul class="tabs-navs">
                <li class="tabs-nav tabs-nav-active"><a target="_blank" href="#page-wrap">充值续费</a></li>
                <li class="tabs-nav"><a target="_blank" href="#page-wrap">充值记录</a></li>
                <li class="tabs-nav"><a target="_blank" href="#page-wrap">发送查询</a></li>
            </ul>

            <span class="sm-left">剩余短信条数：xxx</span>
        </div>
        <div class="modal-bd">
            <div class="tabs-content" id="recharge-plans">
                <p class="slogan">我们向您保证短信的全淘宝最低价</p>

                <div class="plans">
                    <ul>
                        <li id="plan-1" class="plan plan-first">
                            <p class="plan-title">套餐</p>

                            <p class="plan-secondary">（不可退订）</p>

                            <p class="plan-sm"><em class="figure">500</em>条短信</p>

                            <p class="plan-price">抢购价 <em class="figure">40</em>元</p>

                            <p class="plan-unitprice"><em class="figure"></em>元/条</p>
                            <a class="btn recharge-btn" target="_blank" href="#page-wrap">立即订购</a>
                        </li>
                        <li id="plan-2" class="plan">
                            <p class="plan-title">套餐</p>

                            <p class="plan-secondary">（不可退订）</p>

                            <p class="plan-sm"><em class="figure">500</em>条短信</p>

                            <p class="plan-price">抢购价 <em class="figure">40</em>元</p>

                            <p class="plan-unitprice"><em class="figure"></em>元/条</p>
                            <a class="btn recharge-btn" target="_blank" href="#page-wrap">立即订购</a>
                        </li>
                        <li id="plan-3" class="plan">
                            <p class="plan-title">套餐</p>

                            <p class="plan-secondary">（不可退订）</p>

                            <p class="plan-sm"><em class="figure">500</em>条短信</p>

                            <p class="plan-price">抢购价 <em class="figure">40</em>元</p>

                            <p class="plan-unitprice"><em class="figure"></em>元/条</p>
                            <a class="btn recharge-btn" target="_blank" href="#page-wrap">立即订购</a>
                        </li>
                        <li id="plan-4" class="plan">
                            <p class="plan-title">套餐</p>

                            <p class="plan-secondary">（不可退订）</p>

                            <p class="plan-sm"><em class="figure">500</em>条短信</p>

                            <p class="plan-price">抢购价 <em class="figure">40</em>元</p>

                            <p class="plan-unitprice"><em class="figure"></em>元/条</p>
                            <a class="btn recharge-btn" target="_blank" href="#page-wrap">立即订购</a>
                        </li>
                        <li id="plan-5" class="plan">
                            <p class="plan-title">自定义</p>

                            <p class="plan-secondary">（不可退订）</p>

                            <p class="plan-sm"><input type="number" value="10000"/>条短信</p>

                            <p class="plan-price">抢购价 <em class="figure">40</em>元</p>

                            <p class="plan-unitprice"><em class="figure"></em>元/条</p>
                            <a class="btn recharge-btn" target="_blank" href="#page-wrap">立即订购</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <a href="#page-wrap" target="_blank" class="modal-close">关闭</a>
</div>
<div id="pay-modal" class="modal">
    <div class="modal-wrap">
        <div class="modal-bd">
            <div class="modal-bd-wrap">
                <p id="pay-warning">付款时请不要关闭此窗口</p>

                <p id="pay-tip"><em class="highlight">付款后请务必点击“已完成付款”按钮
                </em><br>
                    付款后请务必点击“已完成付款”按钮</p>

                <p id="pay-btn">
                    <a class="btn" href="#page-wrap" target="_blank" aria-label="已完成付款"></a>
                    <a class="link" href="#page-wrap" target="_blank">未完成付款</a>
                </p>
            </div>
        </div>

    </div>
    <a href="#page-wrap" target="_blank" class="modal-close">关闭</a>
</div>
<script type="text/template" id="distribution-modal-template">
    <div class="modal-hd">
        <select>
            {{#options}}
            <option value="{{value}}">{{.}}</option>
            {{/options}}
        </select>

        <div class="sm-blacklist">
            <a href="#page-wrap" target="_blank">禁发买家</a>
        </div>
    </div>
    <div class="modal-bd">
        <p class="sm-desc">{{desc}}</p>

        <p class="sm-condition">发送设置：{{condition}}<input type="number" value="0" name="condition"/>元才发送</p>

        <div class="sm-template">
            <p class="sm-template-title">模板设置：<em class="highlight">亲们注意，短信超过67个字符（含标点符号）会分成两条短信发送。</em></p>

            <div class="sm-template-list">
                <ul>
                    {{#templates}}
                    <li>
                        <input id="sm-template-{{index}}" type="radio" value="{{index}}" name="sm-template/">
                        <label for="sm-template-{{index}}">{{content}}</label>
                    </li>
                    {{/templates}}
                </ul>
                <div class="sm-template-editor hidden">
                    <div class="editor-main">
                        <p class="editor-counter">
                            当前字数<em class="figure"></em>
                        </p>
                        <textarea></textarea>
                    </div>
                    <div class="editor-sub">
                        <p>自动替换<em class="secondary">（单击添加）</em></p>
                        <ul>
                            <li>【收货人姓名】</li>
                            <li>【拍下日期】</li>
                            <li>【店铺名称】</li>
                        </ul>
                    </div>
                    <div class="editor-btn">
                        <a href="#page-wrap" target="_blank" class="btn">保存</a>
                    </div>
                </div>
            </div>
            <div class="sm-template-add">
                <a href="#page-wrap" target="_blank">+增加模板+</a>
            </div>
            <p class="sm-template-shop">【店铺名称】：<input type="text" name="shop"/></p>
        </div>
        <a href="#page-wrap" target="_blank" class="btn">保存设置</a>
    </div>
</script>
<script>
    window.distributionModalData = [
        {
            options: ['已发货提醒', '迟发货提醒', '到达提醒', '签收提醒'],
            desc: '卖家发货后，自动短信通知买家',
            condition: '订单金额大于',
            templates: [
                {
                    index: 0,
                    content: '亲，你在【店铺名称】购买的宝贝我们已通过【物流公司】发出，物流单号：【物流单号】。感谢亲的支持。'
                }
            ]
        },
        {
            options: ['已发货提醒', '迟发货提醒', '到达提醒', '签收提醒'],
            desc: '卖家发货后，自动短信通知买家',
            condition: '订单金额大于',
            templates: [
                {
                    index: 0,
                    content: '亲，你在【店铺名称】购买的宝贝我们已通过【物流公司】发出，物流单号：【物流单号】。感谢亲的支持。'
                }
            ]
        },
        {
            options: ['已发货提醒', '迟发货提醒', '到达提醒', '签收提醒'],
            desc: '卖家发货后，自动短信通知买家',
            condition: '订单金额大于',
            templates: [
                {
                    index: 0,
                    content: '亲，你在【店铺名称】购买的宝贝我们已通过【物流公司】发出，物流单号：【物流单号】。感谢亲的支持。'
                }
            ]
        },
        {
            options: ['已发货提醒', '迟发货提醒', '到达提醒', '签收提醒'],
            desc: '卖家发货后，自动短信通知买家',
            condition: '订单金额大于',
            templates: [
                {
                    index: 0,
                    content: '亲，你在【店铺名称】购买的宝贝我们已通过【物流公司】发出，物流单号：【物流单号】。感谢亲的支持。'
                }
            ]
        }
    ];
</script>
<script src="../../seajs/dist/sea.js"
        data-config="../src/js/config.js?11"
        data-main="../src/js/home.js"></script>
</body>
</html>